<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Motion Path Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="Motion path allows authors to position any graphical object and animate it along an author specified path." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/motion-1/" rel="canonical">
<style>
    /* Style for bikeshed variant of switch/case <dl>s */
    div.switch dl > dd > ol.only {
        margin-left: 0;
    }

    div.switch dl > dd > ol.algorithm {
        margin-left: -2em;
    }

    div.switch dl {
        padding-left: 2em;
    }
editors
    div.switch dl > dt {
        text-indent: -1.5em;
        margin-top: 1em;
    }

    div.switch dl > dt + dt {
        margin-top: 0;
    }

    div.switch dl > dt > p {
        display: inline;
    }

    div.switch dl > dt:before {
        content: '\21AA';
        padding: 0 0.5em 0 0;
        display: inline-block;
        width: 1em;
        text-align: right;
        line-height: 0.5em;
    }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Motion Path Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.fxtf.org/motion-1/">https://drafts.fxtf.org/motion-1/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/motion-1/">https://www.w3.org/TR/motion-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2017/WD-motion-1-20170711/" rel="prev">https://www.w3.org/TR/2017/WD-motion-1-20170711/</a>
     <dd><a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/" rel="prev">https://www.w3.org/TR/2015/WD-motion-1-20150409/</a>
     <dt>Test Suite:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/css/motion">https://github.com/web-platform-tests/wpt/tree/master/css/motion</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="51803"><a class="p-name fn u-email email" href="mailto:dschulze@adobe.com">Dirk Schulze</a> (<span class="p-org org">Adobe Inc.</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shanestephens@google.com">Shane Stephens</a> (<span class="p-org org">Google</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="79168"><a class="p-name fn u-email email" href="mailto:jh.hong@lge.com">Jihye Hong</a> (<span class="p-org org">LG Electronics</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="67534"><a class="p-name fn u-email email" href="mailto:ericwilligers@google.com">Eric Willigers</a> (<span class="p-org org">Google</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/fxtf-drafts/blob/master/motion-1/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/fxtf-drafts/labels/motion-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Motion path allows authors to position any graphical object and animate it along an author specified path.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/fxtf-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “motion” in the title,
	preferably like this:
	“[motion] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-fxtf-archive/">archived</a>,
	and there is also a <a href="http://lists.w3.org/Archives/Public/public-fx/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> (part of the <a href="https://www.w3.org/Style/">Style Activity</a>). </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#placement"><span class="secno">2</span> <span class="content">Module interactions</span></a>
    <li><a href="#values"><span class="secno">3</span> <span class="content">Values</span></a>
    <li>
     <a href="#motion-paths-overview"><span class="secno">4</span> <span class="content">Motion Paths</span></a>
     <ol class="toc">
      <li>
       <a href="#offset-path-property"><span class="secno">4.1</span> <span class="content">Define a path: The <span class="property">offset-path</span> property</span></a>
       <ol class="toc">
        <li><a href="#example-ray"><span class="secno">4.1.1</span> <span class="content">Examples Of <span class="css">ray()</span> Positioning</span></a>
        <li><a href="#example-shape"><span class="secno">4.1.2</span> <span class="content">Examples Of <span class="production">&lt;basic-shape></span> Positioning</span></a>
        <li><a href="#example-coord"><span class="secno">4.1.3</span> <span class="content">Examples of <span class="production">&lt;coord-box></span> Positioning</span></a>
       </ol>
      <li>
       <a href="#offset-distance-property"><span class="secno">4.2</span> <span class="content">Position on the path: The <span class="property">offset-distance</span> property</span></a>
       <ol class="toc">
        <li><a href="#calculating-the-computed-distance-along-a-path"><span class="secno">4.2.1</span> <span class="content">Calculating the computed distance along a path</span></a>
       </ol>
      <li><a href="#offset-position-property"><span class="secno">4.3</span> <span class="content">Define the starting point of the path: The <span class="property">offset-position</span> property</span></a>
      <li><a href="#offset-anchor-property"><span class="secno">4.4</span> <span class="content">Define an anchor point: The <span class="property">offset-anchor</span> property</span></a>
      <li>
       <a href="#offset-rotate-property"><span class="secno">4.5</span> <span class="content">Rotation at point: The <span class="property">offset-rotate</span> property</span></a>
       <ol class="toc">
        <li><a href="#calculating-path-transform"><span class="secno">4.5.1</span> <span class="content">Calculating the path transform</span></a>
       </ol>
      <li><a href="#offset-shorthand"><span class="secno">4.6</span> <span class="content">Offset shorthand: The <span class="property">offset</span> property</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno">5</span> <span class="content">Privacy and Security Considerations</span></a>
    <li><a href="#changes"><span class="secno"></span> <span class="content">Changes</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>Authors have possibilities to position objects like boxes or containers relative to each other or absolutely in their own coordinate system. CSS Transforms extends these possibilities with a set of transform functions allowing authors to mutate the object’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#local-coordinate-system" id="ref-for-local-coordinate-system">local coordinate system</a>. With CSS Animations and CSS Transitions, these static placements can change over a given period of time. Both kind of animations are powerful to express transitions in time but not suitable to describe transitions of location of an object over time.</p>
   <p>This specification allows authors to specify a path. The object can be positioned, transitioned and animated along this path over a given period of time. The time may be static if no animation was specified.</p>
   <div class="example" id="example-a09ee7e4">
    <a class="self-link" href="#example-a09ee7e4"></a> In the following example, a schematic of an air plane is animated along a path. The plane faces in the direction of the path at each position on the path. 
    <figure>
      <img alt="Example Path" height="120" src="images/motion-path.svg" width="470"> 
     <p class="caption">A black plane at different positions on a blue dotted path, rotated in the direction of the path.</p>
    </figure>
   </div>
   <h2 class="heading settled" data-level="2" id="placement"><span class="secno">2. </span><span class="content">Module interactions</span><a class="self-link" href="#placement"></a></h2>
   <p>This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after <a href="https://www.w3.org/TR/css-display-3/#box">box</a>es have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html">Visual formatting model</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Some values of <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path">offset-path</a> and <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position">offset-position</a> result in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context">stacking context</a> and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>.</p>
   <p>Some CSS properties in this specification manipulate the user coordinate system of the element by transformations. These transformations are pre-multiplied to transformations specified by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> property or deriving properties defined in CSS Transform Module Level 1 <a data-link-type="biblio" href="#biblio-css-transforms-1">[CSS-TRANSFORMS-1]</a>, and post-multiplied to transformations specified by the individual transform properties <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate" id="ref-for-propdef-translate">translate</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale" id="ref-for-propdef-scale">scale</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate" id="ref-for-propdef-rotate">rotate</a>, as <a href="https://drafts.csswg.org/css-transforms-2/#ctm">explained</a> in <a href="https://drafts.csswg.org/css-transforms-2/">CSS Transform Module Level 2</a>.</p>
   <h2 class="heading settled" data-level="3" id="values"><span class="secno">3. </span><span class="content">Values</span><a class="self-link" href="#values"></a></h2>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Basic shapes are defined in CSS Shapes Module Level 1 <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a>. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 <a data-link-type="biblio" href="#biblio-css3val">[CSS3VAL]</a>.</p>
   <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-initial">initial</a> and <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> as their property value <a data-link-type="biblio" href="#biblio-css3val">[CSS3VAL]</a>. For readability it has not been repeated explicitly.</p>
   <h2 class="heading settled" data-level="4" id="motion-paths-overview"><span class="secno">4. </span><span class="content">Motion Paths</span><a class="self-link" href="#motion-paths-overview"></a></h2>
   <p>The Motion Path module allows specifying the position of a box as the distance (<a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance">offset-distance</a>) of the box’s <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point">anchor point</a> (<a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor">offset-anchor</a>) along a geometrical path (<a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①">offset-path</a>) defined against the coordinates (<a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①">offset-position</a>) of its containing block. The box’s orientation can optionally be specified as a rotation (<a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate">offset-rotate</a>) with respect to the direction of the path at that point.</p>
   <h3 class="heading settled" data-level="4.1" id="offset-path-property"><span class="secno">4.1. </span><span class="content">Define a path: The <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path②">offset-path</a> property</span><a class="self-link" href="#offset-path-property"></a></h3>
   <table class="def propdef" data-link-for-hint="offset-path">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-offset-path">offset-path</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-offset-path-ray" id="ref-for-valdef-offset-path-ray">ray()</a> <span id="ref-for-comb-one①">|</span> <a href="#offsetpath-pathfunc" id="ref-for-offsetpath-pathfunc">path()</a> <span id="ref-for-comb-one②">|</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value">&lt;url></a> <span id="ref-for-comb-one③">|</span> [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape">&lt;basic-shape></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&amp;&amp;</a> <a class="production css" data-link-type="type">&lt;coord-box></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ] <span id="ref-for-comb-one④">|</span> <span class="production">&lt;coord-box></span>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="offset-path">offset path</dfn>,
a geometrical path the box gets positioned on, 
the <dfn class="dfn-paneled" data-dfn-for="offset path" data-dfn-type="dfn" data-export id="offset-path-initial-position">initial position</dfn> (where on the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path">offset path</a> the element is positioned at <a class="css" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①">offset-distance: 0%</a>),
and the <dfn data-dfn-for="offset path" data-dfn-type="dfn" data-export id="offset-path-initial-direction">initial direction<a class="self-link" href="#offset-path-initial-direction"></a></dfn> (the initial orientation of the box (per <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①">offset-rotate</a>) at the <a data-link-type="dfn" href="#offset-path-initial-position" id="ref-for-offset-path-initial-position">initial position</a>).</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="offset-path" data-dfn-type="value" data-export id="valdef-offset-path-ray">ray()</dfn> = ray( [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a> &amp;&amp; <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-size" id="ref-for-typedef-size" title="Expands to: farthest-side | closest-corner | <length-percentage>{2} | <length> | closest-side | farthest-corner | sides">&lt;size></a> &amp;&amp; contain? ] )
    <dd data-md>
     <dl>
      <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①">offset path</a> is a line segment that starts from the position of the box and proceeds in the direction defined by the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value②" title="Expands to: turn | rad | grad | deg">&lt;angle></a>. As with <a href="https://www.w3.org/TR/css3-images/#gradients">CSS gradients</a>, <span class="production" id="ref-for-angle-value③" title="Expands to: turn | rad | grad | deg">&lt;angle></span> values are interpreted as bearing angles, with <span class="css">0deg</span> pointing up and positive angles representing clockwise rotation.</p>
      <dt data-md><dfn class="css" data-dfn-for="offsetpath" data-dfn-type="value" data-export id="valdef-offsetpath-size">&lt;size><a class="self-link" href="#valdef-offsetpath-size"></a></dfn>
      <dd data-md>
       <p>Decides the path length used when <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance②">offset-distance</a> is expressed as a percentage, using the distance to the containing box. For <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-size" id="ref-for-typedef-size①" title="Expands to: farthest-side | closest-corner | <length-percentage>{2} | <length> | closest-side | farthest-corner | sides">&lt;size></a> values other than <a href="#size-sides" id="ref-for-size-sides">sides</a>, the path length is independent of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value④" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.</p>
       <p>It is defined as:</p>
       <p> <b>&lt;size></b> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]</p>
       <dl>
        <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<size>" data-dfn-type="value" data-export id="size-closest-side">closest-side</dfn>
        <dd data-md>
         <p>The perpendicular distance is measured between the initial position and the closest side of the box from it.</p>
        <dt data-md><dfn class="css" data-dfn-for="<size>" data-dfn-type="value" data-export id="size-closest-corner">closest-corner<a class="self-link" href="#size-closest-corner"></a></dfn>
        <dd data-md>
         <p>The distance is measured between the initial position and the closest corner of the box from it.</p>
        <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<size>" data-dfn-type="value" data-export id="size-farthest-side">farthest-side</dfn>
        <dd data-md>
         <p>The perpendicular distance is measured between the initial position and the farthest side of the box from it.</p>
        <dt data-md><dfn class="css" data-dfn-for="<size>" data-dfn-type="value" data-export id="size-farthest-corner">farthest-corner<a class="self-link" href="#size-farthest-corner"></a></dfn>
        <dd data-md>
         <p>The distance is measured between the initial position and the farthest corner of the box from it.</p>
        <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<size>" data-dfn-type="value" data-export id="size-sides">sides</dfn>
        <dd data-md>
         <p>The distance is measured between the initial position and the intersection of the ray with the box. If the initial position is not within the box, the distance is 0.</p>
       </dl>
       <p class="note" role="note"><span>Note:</span> When the initial position is on one of the edges of the containing block, the closest side takes the edge that the initial position is on, and thus the path length used for percentage <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance③">offset-distance</a> values is 0.</p>
       <p class="note" role="note"><span>Note:</span> When <a href="#size-closest-side" id="ref-for-size-closest-side">closest-side</a> or <a href="#size-farthest-side" id="ref-for-size-farthest-side">farthest-side</a> are used, and the initial position is outside the box, the sides are considered to extend indefinitely.</p>
      <dt data-md><dfn class="css" data-dfn-for="offset-path" data-dfn-type="value" data-export id="valdef-offset-path-contain">contain<a class="self-link" href="#valdef-offset-path-contain"></a></dfn>
      <dd data-md>
       <p>The used value of <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance④">offset-distance</a> is clamped so that the box is entirely contained within the path.</p>
       <p>If no <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance⑤">offset-distance</a> would lead to the box being enclosed by the path, the path size is minimally increased so that such an <span class="property" id="ref-for-propdef-offset-distance⑥">offset-distance</span> exists.</p>
     </dl>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape①">&lt;basic-shape></a> &amp;&amp; <a class="production css" data-link-type="type">&lt;coord-box></a>?
    <dd data-md>
     <p>The <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②">offset path</a> is a basic shape as specified in CSS Shapes <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a>.</p>
     <p><a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position②">offset-position</a> is ignored for circle and ellipse basic shapes with explicit center positions, and for other types of basic shapes. If a circle or ellipse basic shape has no explicit center position, the shape is centered at the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position">initial position</a> of the path, as described in <span class="property" id="ref-for-propdef-offset-position③">offset-position</span>.</p>
     <p>The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①">initial position</a> for basic shapes are defined as follows:</p>
     <dl>
      <dt data-md><a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-shapes-1/#funcdef-circle" id="ref-for-funcdef-circle">&lt;circle()></a>
      <dt data-md><a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-shapes-1/#funcdef-ellipse" id="ref-for-funcdef-ellipse">&lt;ellipse()></a>
      <dd data-md>
       <p>The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position②">initial position</a> is defined by the point where a horizontal tangent to the circle/ellipse would reach the top vertical position.</p>
      <dt data-md><a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-shapes-1/#funcdef-inset" id="ref-for-funcdef-inset">&lt;inset()></a>
      <dd data-md>
       <p>The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position③">initial position</a> is the left end of the top horizontal line, immediately to the right of any <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a> arc.</p>
      <dt data-md><a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-shapes-1/#funcdef-polygon" id="ref-for-funcdef-polygon">&lt;polygon()></a>
      <dd data-md>
       <p>The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position④">initial position</a> is defined by the first coordinate pair of the polygon.</p>
       <p>The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-direction" id="ref-for-valdef-offsetpath-initial-direction">initial direction</a> is defined by the vector connecting.</p>
       <p>the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position⑤">initial position</a> with the next following coordinate pair that isn’t equal to the <span class="css" id="ref-for-valdef-offsetpath-initial-position⑥">initial position</span>.</p>
     </dl>
     <p>The <a class="production css" data-link-type="type">&lt;coord-box></a> specified in combination with a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape②">&lt;basic-shape></a> provides the reference box for the <span class="production" id="ref-for-typedef-basic-shape③">&lt;basic-shape></span>. If no reference box is specified, it defaults to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box" id="ref-for-valdef-shape-box-border-box">border-box</a>.</p>
     <p>Apart from polygons with non-zero length, the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-direction" id="ref-for-valdef-offsetpath-initial-direction①">initial direction</a> is 90 degrees (i.e. to the right).</p>
     <p class="note" role="note"><span>Note:</span> This gives <span class="css">0deg</span> rotation when <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate②">offset-rotate</a> is <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto">auto</a>.</p>
    <dt data-md><a class="production css" data-link-type="type">&lt;coord-box></a>
    <dd data-md>
     <p>The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position⑦">initial position</a> is the left end of the top horizontal line, immediately to the right of any <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius" id="ref-for-propdef-border-radius①">border-radius</a> arc, and the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-direction" id="ref-for-valdef-offsetpath-initial-direction②">initial direction</a> is to the right.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="offset-path" data-dfn-type="function" data-export id="offsetpath-pathfunc">path()</dfn> = path(<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value">&lt;string></a>)
    <dd data-md>
     <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value①">&lt;string></a> represents an SVG Path data string.
The path data string must be conform to the grammar and parsing rules of SVG 1.1 <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.
The <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position⑧">initial position</a> is defined by the first “move to” argument in the path string. For the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-direction" id="ref-for-valdef-offsetpath-initial-direction③">initial direction</a> follow SVG 1.1 <span>[SVG11]</span>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value①">&lt;url></a>
    <dd data-md>
     <p>References an SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement" id="ref-for-TermShapeElement">shape element</a> and uses its geometry as <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path③">offset path</a>.
See SVG 1.1 for more information about the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position⑨">initial position</a> and <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-direction" id="ref-for-valdef-offsetpath-initial-direction④">initial direction</a> <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="offsetpath" data-dfn-type="value" data-export id="offsetpath-none">none</dfn>
    <dd data-md>
     <p>No <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path④">offset path</a> gets created. When <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path③">offset-path</a> is <a href="#offsetpath-none" id="ref-for-offsetpath-none">none</a>, <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance⑦">offset-distance</a> and <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate③">offset-rotate</a> have no effect.</p>
   </dl>
   <p>A computed value of other than <a href="#offsetpath-none" id="ref-for-offsetpath-none①">none</a> results in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context①">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="termref-for-">transforms</a>.</p>
   <p>A reference that fails to download, is not a reference to an SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement" id="ref-for-TermShapeElement①">shape element</a>, or is non-existent, is treated as equivalent to <code>path("m 0 0")</code>.</p>
   <p class="note" role="note"><span>Note:</span> This is a zero length path with <a href="https://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes">directionality</a> aligned with the positive x-axis.</p>
   <p></p>
   <p>See the section <a href="#calculating-path-transform">“Calculating the path transform”</a> for how to use the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path⑤">offset path</a> to compute the transform.</p>
   <p>For SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement" id="ref-for-TermShapeElement②">shape element</a>s without associated CSS layout box, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used value</a> for <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box">content-box</a>, <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-padding-box" id="ref-for-valdef-mask-clip-padding-box">padding-box</a>, <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box">border-box</a> and <a class="css" data-link-type="value" href="https://www.w3.org/TR/css-masking-1/#valuedef-margin-box0" id="ref-for-valuedef-margin-box0">margin-box</a> is <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box">fill-box</a>.</p>
   <p>For <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement" id="ref-for-TermShapeElement③">shape element</a>s with associated CSS layout box, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value①">used value</a> for <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box①">fill-box</a>, <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box">stroke-box</a> and <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-view-box" id="ref-for-valdef-clip-path-view-box">view-box</a> is <a class="css" data-link-type="value" href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box①">border-box</a>.</p>
   <h4 class="heading settled" data-level="4.1.1" id="example-ray"><span class="secno">4.1.1. </span><span class="content">Examples Of <a class="css" data-link-type="maybe" href="#valdef-offset-path-ray" id="ref-for-valdef-offset-path-ray①">ray()</a> Positioning</span><a class="self-link" href="#example-ray"></a></h4>
   <div class="example" id="example-c2ddc1d0">
    <a class="self-link" href="#example-c2ddc1d0"></a> Here are some examples. The first example shows that some parts of boxes are outside of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path⑥">offset path</a>. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- mi>0</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>redBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>45</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>blueBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>180</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"redBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"blueBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of boxes positioned without contain" src="images/offset_distance_without_contain.png" style="width: 200px;"> 
     <figcaption><a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path④">offset-path</a> without <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-1/#propdef-contain" id="ref-for-propdef-contain">contain</a></figcaption>
    </figure>
    <p>In the second example, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-1/#propdef-contain" id="ref-for-propdef-contain①">contain</a> is given to the <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path⑤">offset-path</a> value of each box
    to avoid overflowing.</p>
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- mi>0</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>redBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>45</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-> <c- kc>contain</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>blueBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>180</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-> <c- kc>contain</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"redBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"blueBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of boxes positioned with contain" src="images/offset_distance_with_contain.png" style="width: 200px;"> 
     <figcaption><a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path⑥">offset-path</a> with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-1/#propdef-contain" id="ref-for-propdef-contain②">contain</a></figcaption>
    </figure>
    <p>In the third example, the path size is increased so that the box can be contained. The <a data-link-type="dfn" href="#used-offset-distance" id="ref-for-used-offset-distance">used offset distance</a> is negative.</p>
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>250</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>250</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>60</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>10</c-><c- b>%</c-><c- p>;</c->

        <c- n>offset-position</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>0</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- mi>0</c-><c- b>deg</c-><c- p>;</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- mi>200</c-><c- b>%</c-> <c- mi>-300</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>blueBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>-90</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-> <c- kc>contain</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"blueBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of an increased path size" src="images/increase-size.svg" style="width: 400px; height: 335;"> 
     <figcaption><a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path⑦">offset-path</a> with path size increased</figcaption>
    </figure>
    <p>In the fourth example, the initial position is outside the containing block.</p>
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>#</c-><c- nn>container</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>140</c-><c- b>%</c-> <c- mi>70</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>redBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>-90</c-><c- b>deg</c-> <c- n>sides</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>blueBox</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>180</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"container"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"redBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"blueBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image with initial position outside the containing block" src="images/initial-outside.svg" style="width: 700px;"> 
     <figcaption>Initial position outside the containing block</figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.1.2" id="example-shape"><span class="secno">4.1.2. </span><span class="content">Examples Of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape④">&lt;basic-shape></a> Positioning</span><a class="self-link" href="#example-shape"></a></h4>
   <div class="example" id="example-11a5a836">
    <a class="self-link" href="#example-11a5a836"></a> This example uses a circle with implicit center position. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>323</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>131</c-><c- b>px</c-><c- p>;</c->
        <c- k>margin</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- k>border</c-><c- p>:</c-> <c- mi>2</c-><c- b>px</c-> <c- kc>solid</c-> <c- kc>black</c-><c- p>;</c->
        <c- k>padding</c-><c- p>:</c-> <c- mi>8</c-><c- b>px</c-><c- p>;</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>item</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c->  <c- mi>90</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>40</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>violet</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>middle</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> circle<c- p>(</c-><c- mi>60</c-><c- b>%</c-><c- p>)</c-> <c- kc>margin-box</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>25</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>left</c-> <c- kc>top</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"middle"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="Normal flow determining circle center" height="324" src="images/normal-flow.svg" width="505"> 
     <figcaption>The circle center is determined by normal flow.</figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.1.3" id="example-coord"><span class="secno">4.1.3. </span><span class="content">Examples of <a class="production css" data-link-type="type">&lt;coord-box></a> Positioning</span><a class="self-link" href="#example-coord"></a></h4>
   <div class="example" id="example-1ea93cf3">
    <a class="self-link" href="#example-1ea93cf3"></a> This example shows how <a class="production css" data-link-type="type">&lt;coord-box></a> <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path⑦">offset path</a> works in combination with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius" id="ref-for-propdef-border-radius②">border-radius</a>. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>500</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>border-radius</c-><c- p>:</c-> <c- mi>80</c-><c- b>px</c-><c- p>;</c->
        <c- k>border</c-><c- p>:</c-> <c- kc>dashed</c-> <c- kc>aqua</c-><c- p>;</c->
        <c- k>margin</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>blueBox</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>40</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>20</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- kc>margin-box</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"blueBox"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of example for geometry-box with border-radius" src="images/geometry-box.svg" style="width: 470px; text-align: center"> 
     <figcaption>The <a data-link-type="dfn" href="#offset-path-initial-position" id="ref-for-offset-path-initial-position①">initial position</a> is the left end of the top horizontal line.</figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="4.2" id="offset-distance-property"><span class="secno">4.2. </span><span class="content">Position on the path: The <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance⑧">offset-distance</a> property</span><a class="self-link" href="#offset-distance-property"></a></h3>
   <table class="def propdef" data-link-for-hint="offset-distance">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-offset-distance">offset-distance</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to the total path length
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> value
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies the position of the box as a distance along the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path⑧">offset path</a>.</p>
   <dl>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a>
    <dd data-md>
     <p>Specifies the distance from the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①⓪">initial position</a> of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path⑨">offset path</a> to the position of the box’s <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point①">anchor point</a>.</p>
     <p>Percentages are relative to the length of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①⓪">offset path</a>-- that is, the distance between the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①①">initial position</a> and the end position of the <span id="ref-for-offset-path①①">offset path</span>.</p>
   </dl>
   <h4 class="heading settled" data-level="4.2.1" id="calculating-the-computed-distance-along-a-path"><span class="secno">4.2.1. </span><span class="content">Calculating the computed distance along a path</span><a class="self-link" href="#calculating-the-computed-distance-along-a-path"></a></h4>
   <p>Processing the distance along an <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①②">offset path</a> operates differently depending upon the nature of the <span id="ref-for-offset-path①③">offset path</span>:</p>
   <ul>
    <li data-md>
     <p>References to <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value⑤" title="Expands to: turn | rad | grad | deg">&lt;angle></a> <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①④">offset path</a>s with contain are unclosed intervals.</p>
    <li data-md>
     <p>References to <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value⑥" title="Expands to: turn | rad | grad | deg">&lt;angle></a> <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①⑤">offset path</a>s without contain are unbounded rays.</p>
    <li data-md>
     <p>All basic CSS shapes are closed loops.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①⑥">Offset path</a>s (including references to SVG Paths) are closed loops only if the final command in the path list is a closepath command ("z" or "Z"), otherwise they are unclosed intervals.</p>
    <li data-md>
     <p>References to SVG circles, ellipses, images, polygons and rects are closed loops.</p>
    <li data-md>
     <p>References to SVG lines and polylines are unclosed intervals.</p>
   </ul>
   <p>To determine the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="used-offset-distance">used offset distance</dfn> for a given <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①⑦">offset path</a> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="offset-distance">offset distance</dfn>:</p>
   <ol>
    <li data-md>
     <p>Let the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="total-length">total length</dfn> be the total length of <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①⑧">offset path</a> with all sub-paths.</p>
    <li data-md>
     <p>Convert <a data-link-type="dfn" href="#offset-distance" id="ref-for-offset-distance">offset distance</a> to pixels, with 100% being converted to <a data-link-type="dfn" href="#total-length" id="ref-for-total-length">total length</a>.</p>
    <li data-md>
     <dl class="switch">
      <dt data-md>If <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path①⑨">offset path</a> is an unbounded ray:
      <dd data-md>
       <p>Let <a data-link-type="dfn" href="#used-offset-distance" id="ref-for-used-offset-distance①">used offset distance</a> be equal to <a data-link-type="dfn" href="#offset-distance" id="ref-for-offset-distance①">offset distance</a>.</p>
      <dt data-md>Otherwise if <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②⓪">offset path</a> is an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value⑦" title="Expands to: turn | rad | grad | deg">&lt;angle></a> path with contain:
      <dd data-md>
       <p>Let <a data-link-type="dfn" href="#used-offset-distance" id="ref-for-used-offset-distance②">used offset distance</a> be equal to <a data-link-type="dfn" href="#offset-distance" id="ref-for-offset-distance②">offset distance</a>, clamped so that the box lies entirely within the path.</p>
      <dt data-md>If <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②①">offset path</a> is any other unclosed interval:
      <dd data-md>
       <p>Let <a data-link-type="dfn" href="#used-offset-distance" id="ref-for-used-offset-distance③">used offset distance</a> be equal to <a data-link-type="dfn" href="#offset-distance" id="ref-for-offset-distance③">offset distance</a> clamped by 0 and the total length of the path.</p>
      <dt data-md>Otherwise <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②②">offset path</a> is a closed loop:
      <dd data-md>
       <p>Let <a data-link-type="dfn" href="#used-offset-distance" id="ref-for-used-offset-distance④">used offset distance</a> be equal to <a data-link-type="dfn" href="#offset-distance" id="ref-for-offset-distance④">offset distance</a> modulo the total length of the path. If the total length of the path is 0, <span id="ref-for-used-offset-distance⑤">used offset distance</span> is also 0.</p>
       <p class="note" role="note"><span>Note:</span> “Modulo” here uses the traditional mathematical definition,
where the output is always non-negative.</p>
     </dl>
   </ol>
   <div class="example" id="example-585ba838">
    <a class="self-link" href="#example-585ba838"></a> This example shows boxes placed along an unclosed interval. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>.</c-><c- nc>item</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>40</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>0</c-><c- b>%</c-> <c- mi>0</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>path</c-><c- p>(</c-><c- t>'m 0 0 h 200 v 150'</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box1</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>-280</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box2</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>190</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example of boxes placed along an unclosed interval" src="images/offset-distance-unclosed.svg" style="width: 700px;"> 
     <figcaption>An example of boxes placed along an unclosed interval</figcaption>
    </figure>
   </div>
   <div class="example" id="example-a2477893">
    <a class="self-link" href="#example-a2477893"></a> This example shows boxes placed along a closed interval. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>.</c-><c- nc>item</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>40</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>0</c-><c- b>%</c-> <c- mi>0</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>path</c-><c- p>(</c-><c- t>'m 0 0 h 200 v 150 z'</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box1</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>-280</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box2</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>190</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example of boxes placed along a closed interval" src="images/offset-distance-closed.svg" style="width: 700px;"> 
     <figcaption>An example of boxes placed along a closed interval</figcaption>
    </figure>
   </div>
   <div class="example" id="example-acf2c7ce">
    <a class="self-link" href="#example-acf2c7ce"></a> This example shows a way to align boxes within the polar coordinate system using <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path⑧">offset-path</a>, <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance⑨">offset-distance</a>. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>border</c-><c- p>:</c-> <c- kc>dashed</c-> <c- kc>gray</c-><c- p>;</c->
        <c- k>border-radius</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>circleBox</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>40</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>40</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
        <c- k>border-radius</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>circle1</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>0</c-><c- b>deg</c-> <c- n>farthest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>circle2</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>90</c-><c- b>deg</c-> <c- n>farthest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>circle3</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>225</c-><c- b>deg</c-> <c- n>farthest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circleBox"</c-> <c- e>id</c-><c- o>=</c-><c- s>"circle1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circleBox"</c-> <c- e>id</c-><c- o>=</c-><c- s>"circle2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circleBox"</c-> <c- e>id</c-><c- o>=</c-><c- s>"circle3"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of three boxes positioned to polar coordinates" src="images/simple_offset_position.png" style="width: 300px;"> 
     <figcaption>An example of positioning box in polar coordinates</figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="4.3" id="offset-position-property"><span class="secno">4.3. </span><span class="content">Define the starting point of the path: The <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position④">offset-position</a> property</span><a class="self-link" href="#offset-position-property"></a></h3>
   <table class="def propdef" data-link-for-hint="offset-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-offset-position">offset-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-position" id="ref-for-typedef-position">&lt;position></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>Refer to the size of containing block
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>For <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> the absolute value, otherwise a percentage.
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①②">initial position</a> of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②③">offset path</a>. If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a> is specified with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static">static</a>, <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position⑤">offset-position</a> would be ignored.</p>
   <p>Values are defined as follows:</p>
   <dl>
    <dt data-md><var>auto</var>
    <dd data-md>
     <p>Indicates the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①③">initial position</a> is the position of the box specified with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position①">position</a> property.</p>
     <p class="note" role="note"><span>Note:</span> When <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position②">position</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static①">static</a> and <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position⑥">offset-position</a> is <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto①">auto</a> (and not ignored due to <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path⑨">offset-path</a>), we have positioning relative to <a href="https://drafts.csswg.org/css-position-3/#normal-flow">normal flow</a>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-position" id="ref-for-typedef-position①">&lt;position></a>
    <dd data-md>
     <p>Specifies the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①④">initial position</a>, with the the containing block as the positioning area and a dimensionless point (zero-sized box) as the object area.</p>
     <p class="note" role="note"><span>Note:</span> This is similar to absolute positioning, except that <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position⑦">offset-position</a> does not prevent boxes from impacting the layout of later siblings.</p>
   </dl>
   <p>A computed value of other than <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto②">auto</a> results in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context②">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="termref-for-①">transforms</a>.</p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position⑧">offset-position</a> is ignored if <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①⓪">offset-path</a> is a geometry-box, or a basic shape (other than a circle or ellipse with implicit center). In these cases, the geometry-box or basic shape specifies the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①⑤">initial position</a>.</p>
   <div class="example" id="example-d288583a">
    <a class="self-link" href="#example-d288583a"></a> This example shows positioning a box with <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position⑨">offset-position</a>. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>#</c-><c- nn>wrap</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>relative</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>border</c-><c- p>:</c-> <c- mi>1</c-><c- b>px</c-> <c- kc>solid</c-> <c- kc>black</c-><c- p>;</c->
    <c- p>}</c->

    <c- p>#</c-><c- nn>box</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>80</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>center</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>45</c-><c- b>deg</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"wrap"</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"box"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of offset-position: auto" src="images/offset_position_auto.png" width="300"> 
     <figcaption>An example when <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto③">auto</a> is given to <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①⓪">offset-position</a></figcaption>
    </figure>
   </div>
   <div class="example" id="example-43c03a15">
    <a class="self-link" href="#example-43c03a15"></a> This example shows the interaction with the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform①">transform</a> property, and with an individual transform property (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate" id="ref-for-propdef-rotate①">rotate</a>). The motion path transform is a vertical translation moving (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a>) to <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①①">offset-position</a>. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>#</c-><c- nn>wrap</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>400</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>350</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>item</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c-> <c- c>/* translates by 0px,100px */</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>left</c-> <c- kc>top</c-><c- p>;</c->
        <c- k>transform-origin</c-><c- p>:</c-> <c- kc>left</c-> <c- kc>top</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>130</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>80</c-><c- b>px</c-><c- p>;</c->
        <c- k>border-top-right-radius</c-><c- p>:</c-> <c- mi>23</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box1</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>tomato</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box2</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box3</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>navy</c-><c- p>;</c->
        <c- n>rotate</c-><c- p>:</c-> <c- mi>90</c-><c- b>deg</c-><c- p>;</c-> <c- c>/* applied before motion path transform */</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box4</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>gold</c-><c- p>;</c->
        <c- k>transform</c-><c- p>:</c-> rotate<c- p>(</c-><c- mi>90</c-><c- b>deg</c-><c- p>);</c-> <c- c>/* applied after motion path transform */</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"wrap"</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box3"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box4"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example when motion path and other transforms interact" height="350" src="images/position-transform.svg" width="400"> 
     <figcaption>An example when motion path and other transforms interact</figcaption>
    </figure>
   </div>
   <div class="example" id="example-c1988e48">
    <a class="self-link" href="#example-c1988e48"></a> This example uses <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position③">position</a> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static②">static</a>, so <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①②">offset-position</a> generates translations from the <a href="https://drafts.csswg.org/css-position/#normal-flow">normal flow</a> positions. By amplifying these translations using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale" id="ref-for-propdef-scale①">scale</a>, the normal flow is rotated 180 degrees around the <span class="property" id="ref-for-propdef-offset-position①③">offset-position</span>, and the boxes are exploded away from each other. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>#</c-><c- nn>wrap</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>500</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>250</c-><c- b>px</c-><c- p>;</c->
        <c- k>line-height</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- f>span</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>static</c-><c- p>;</c->
        <c- k>display</c-><c- p>:</c-> <c- kc>inline-block</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>border-top-right-radius</c-><c- p>:</c-> <c- mi>23</c-><c- b>px</c-><c- p>;</c->
        <c- n>scale</c-><c- p>:</c-> <c- mf>2.5</c-> <c- mf>2.5</c-><c- p>;</c-> <c- c>/* applied before motion path transform */</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- kc>center</c-><c- p>;</c->
        <c- k>transform</c-><c- p>:</c-> scale<c- p>(</c-><c- mf>0.4</c-><c- p>);</c-> <c- c>/* applied after motion path transform */</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box1</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>tomato</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box2</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box3</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>navy</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box4</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>gold</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"wrap"</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-><c- p>></c->
            <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"box1"</c-><c- p>>&lt;/</c-><c- f>span</c-><c- p>>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"box2"</c-><c- p>>&lt;/</c-><c- f>span</c-><c- p>></c->
        <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-><c- p>></c->
            <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"box3"</c-><c- p>>&lt;/</c-><c- f>span</c-><c- p>>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"box4"</c-><c- p>>&lt;/</c-><c- f>span</c-><c- p>></c->
        <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example when motion path and scale interact" height="304" src="images/position-scale.svg" width="604"> 
     <figcaption>An example when motion path and scale interact</figcaption>
    </figure>
   </div>
   <div class="example" id="example-3480f06b">
    <a class="self-link" href="#example-3480f06b"></a> In this example, each <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①④">offset-position</a> value is ignored as <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①①">offset-path</a> is a <a class="production css" data-link-type="type" href="https://drafts.fxtf.org/css-masking-1/#typedef-geometry-box" id="ref-for-typedef-geometry-box">&lt;geometry-box></a>, but the other offset properties combine to have an effect equivalent to that for <span class="property" id="ref-for-propdef-offset-position①⑤">offset-position</span> 'right bottom'. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>#</c-><c- nn>wrap</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>540</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>420</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>item</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>90</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>70</c-><c- b>px</c-><c- p>;</c->
        <c- k>border-top-right-radius</c-><c- p>:</c-> <c- mi>23</c-><c- b>px</c-><c- p>;</c->
        <c- n>scale</c-><c- p>:</c-> <c- mf>0.8</c-> <c- mf>0.8</c-><c- p>;</c-> <c- c>/* applied before motion path transform */</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- kc>padding-box</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- mi>0</c-><c- b>deg</c-><c- p>;</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>right</c-> <c- kc>bottom</c-><c- p>;</c->
        <c- k>transform</c-><c- p>:</c-> scale<c- p>(</c-><c- mf>1.25</c-><c- p>);</c-> <c- c>/* applied after motion path transform */</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box1</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>tomato</c-><c- p>;</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>static</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c-> <c- c>/* ignored */</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box2</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
        <c- k>right</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>23</c-><c- b>%</c-> <c- mi>45</c-><c- b>%</c-><c- p>;</c-> <c- c>/* ignored */</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box3</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>navy</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- k>bottom</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>34</c-><c- b>%</c-> <c- mi>56</c-><c- b>px</c-><c- p>;</c-> <c- c>/* ignored */</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>box4</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>gold</c-><c- p>;</c->
        <c- k>right</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- k>bottom</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>45</c-><c- b>px</c-> <c- mi>67</c-><c- b>px</c-><c- p>;</c-> <c- c>/* ignored */</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"wrap"</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box3"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"item"</c-> <c- e>id</c-><c- o>=</c-><c- s>"box4"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example when offset-position is ignored" height="430" src="images/position-absolute.svg" width="550"> 
     <figcaption>An example when offset-position is ignored</figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="4.4" id="offset-anchor-property"><span class="secno">4.4. </span><span class="content">Define an anchor point: The <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor①">offset-anchor</a> property</span><a class="self-link" href="#offset-anchor-property"></a></h3>
   <table class="def propdef" data-link-for-hint="offset-anchor">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-offset-anchor">offset-anchor</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-position" id="ref-for-typedef-position②">&lt;position></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>Relative to the width and the height of a box
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>For <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> the absolute value, otherwise a percentage.
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Defines an <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point②">anchor point</a> of the box positioned along the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②④">offset path</a>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="anchor-point">anchor point</dfn> specifies the point of the box which is to be considered as the point that is moved along the <span id="ref-for-offset-path②⑤">offset path</span>.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><var>auto</var>
    <dd data-md>
     <p>Computes to the value from <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①⑥">offset-position</a>, provided <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①②">offset-path</a> is <a href="#offsetpath-none" id="ref-for-offsetpath-none②">none</a> and <span class="property" id="ref-for-propdef-offset-position①⑦">offset-position</span> is not <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto④">auto</a>. Otherwise, computes to the value from <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin" id="ref-for-propdef-transform-origin">transform-origin</a>. When <span class="css" id="ref-for-valdef-offset-rotate-auto⑤">auto</span> is given to <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor②">offset-anchor</a>, and <span class="property" id="ref-for-propdef-offset-path①③">offset-path</span> is <a href="#offsetpath-none" id="ref-for-offsetpath-none③">none</a>, <span class="property" id="ref-for-propdef-offset-position①⑧">offset-position</span> behaves similar to <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-position" id="ref-for-typedef-position③">&lt;position></a>
    <dd data-md>
     <dl>
      <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a>
      <dd data-md>
       <p>A percentage for the horizontal offset is relative to width of content area. A percentage for the vertical offset is relative to the height of the content area. For example, with a value pair of '100%, 0%', an <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point③">anchor point</a> is on the upper right corner of the box.</p>
      <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>
      <dd data-md>
       <p>A length value gives a length offset from the upper left corner of the box’s content area.</p>
     </dl>
   </dl>
   <div class="example" id="example-19a6f2eb">
    <a class="self-link" href="#example-19a6f2eb"></a> The following explains how to set the <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point④">anchor point</a> of the box. 
<pre><code class="highlight">#plane {
    offset-anchor: center;
}
</code></pre>
    <p>The red dot in the middle of the shape indicates the <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point⑤">anchor point</a> of the shape.</p>
    <figure>
      <img alt="Shape with its anchor point" height="140" src="images/plane.svg" width="160"> 
     <figcaption>A red dot in the middle of a plane shape indicates the shape’s <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point⑥">anchor point</a>.</figcaption>
    </figure>
   </div>
   <div class="example" id="example-7adfb83c">
    <a class="self-link" href="#example-7adfb83c"></a> This example shows an alignment of four boxes with different <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point⑦">anchor point</a>s. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>transform-style</c-><c- p>:</c-> <c- kc>preserve-3d</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>border</c-><c- p>:</c-> <c- mi>2</c-><c- b>px</c-> <c- kc>solid</c-> <c- kc>gray</c-><c- p>;</c->
        <c- k>border-radius</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>orange</c-><c- p>;</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- mi>0</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item1</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>45</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>right</c-> <c- kc>top</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item2</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>135</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>right</c-> <c- kc>bottom</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item3</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>225</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>left</c-> <c- kc>bottom</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item4</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>315</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>left</c-> <c- kc>top</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item3"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item4"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example of offset-anchor" src="images/offset_anchor.png" style="width: 300px;"> 
     <figcaption>An example of <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor③">offset-anchor</a></figcaption>
    </figure>
   </div>
   <div class="example" id="example-70b8f14f">
    <a class="self-link" href="#example-70b8f14f"></a> This example shows boxes centered at their offset-position. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>500</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>500</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>mediumpurple</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- kc>none</c-><c- p>;</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>center</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item1</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>90</c-><c- b>%</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>60</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item2</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>30</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>10</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item3</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>60</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item4</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>0</c-><c- b>%</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>30</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>90</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item3"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item4"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example of offset-anchor: center" src="images/offset_anchor_center.svg"> 
     <figcaption>An example of 'offset-anchor: center'</figcaption>
    </figure>
   </div>
   <div class="example" id="example-e236d2d9">
    <a class="self-link" href="#example-e236d2d9"></a> This example shows how offset-anchor computes to their offset-position. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>500</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>500</c-><c- b>px</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>box</c-> <c- p>{</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>mediumpurple</c-><c- p>;</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- kc>none</c-><c- p>;</c->
        <c- n>offset-anchor</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item1</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>90</c-><c- b>%</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>60</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item2</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>30</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>10</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item3</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>20</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>60</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item4</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>0</c-><c- b>%</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>30</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>90</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item1"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item2"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item3"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item4"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An example of offset-anchor: auto" src="images/offset_anchor_auto.svg"> 
     <figcaption>An example of 'offset-anchor: auto'</figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="4.5" id="offset-rotate-property"><span class="secno">4.5. </span><span class="content">Rotation at point: The <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate④">offset-rotate</a> property</span><a class="self-link" href="#offset-rotate-property"></a></h3>
   <table class="def propdef" data-link-for-hint="offset-rotate">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-offset-rotate">offset-rotate</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> reverse ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value⑧" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value⑨" title="Expands to: turn | rad | grad | deg">&lt;angle></a> value, optionally preceded by auto
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Defines the orientation of the box while positioning along the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②⑥">offset path</a>.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="offset-rotate" data-dfn-type="value" data-export id="valdef-offset-rotate-auto">auto</dfn>
    <dd data-md>
     <p>Indicates that the object is rotated (over time if <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①⓪">offset-distance</a> is animated) by the angle of the direction (i.e., directional tangent vector) of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②⑦">offset path</a>, relative to the positive x-axis. If specified in combination with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①⓪" title="Expands to: turn | rad | grad | deg">&lt;angle></a>, the computed value of <span class="production" id="ref-for-angle-value①①" title="Expands to: turn | rad | grad | deg">&lt;angle></span> is added to the computed value of <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto⑥">auto</a>.</p>
     <p class="note" role="note"><span>Note:</span> For ray paths, the rotation implied by <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto⑦">auto</a> is 90 degrees less than the ray’s bearing <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①②" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="offset-rotate" data-dfn-type="value" data-export id="valdef-offset-rotate-reverse">reverse</dfn>
    <dd data-md>
     <p>Indicates that the object is rotated (over time if <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①①">offset-distance</a> is animated) by the angle of the direction (i.e., directional tangent vector) of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②⑧">offset path</a>, relative to the positive x-axis, plus 180 degrees. If specified in combination with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①③" title="Expands to: turn | rad | grad | deg">&lt;angle></a>, the computed value of <span class="production" id="ref-for-angle-value①④" title="Expands to: turn | rad | grad | deg">&lt;angle></span> is added to the computed value of <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-reverse" id="ref-for-valdef-offset-rotate-reverse">reverse</a>.</p>
     <p class="note" role="note"><span>Note:</span> This is the same as specifying <span class="css">auto 180deg</span>.</p>
    <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①⑤" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
    <dd data-md>
     <p>Indicates that the box has a constant clockwise rotation transformation applied to it by the specified rotation angle. See definitions of <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto⑧">auto</a> or <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-reverse" id="ref-for-valdef-offset-rotate-reverse①">reverse</a> if specified in combination with either one of the keywords.</p>
   </dl>
   <p>When the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path②⑨">offset path</a> is a zero length path, the value of <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate⑤">offset-rotate</a> is 0 degree, the direction of the positive x-axis.</p>
   <p>If the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path③⓪">offset path</a> is composed of multiple line segments, the orientation at the connection between the segments is the direction of the "later" segment.
(This matches SVG’s notion of <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/paths.html#TermPathDirection" id="ref-for-TermPathDirection">direction of a path</a>.)</p>
   <p class="note" role="note"><span>Note:</span> The rotation described here does not override or replace any rotation defined by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform②">transform</a> property.</p>
   <div class="example" id="example-b0a7dcb3">
    <a class="self-link" href="#example-b0a7dcb3"></a> The following examples use the shape of a plane. The red dot in the middle of the shape indicates the <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point⑧">anchor point</a> of the shape. When no offset properties are set, the shape is not translated or rotated along the path. 
    <figure>
      <img alt="Path without offset" height="120" src="images/offset-initial.svg" width="470"> 
     <figcaption>A black plane at the beginning of the path, with no offset properties set.</figcaption>
    </figure>
    <p>When the shape’s <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point⑨">anchor point</a> is placed at different positions along the path and <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate⑥">offset-rotate</a> is <span class="css">0deg</span>, the shape is not rotated.</p>
    <figure>
      <img alt="Path without rotation" height="120" src="images/offset-rotate-none.svg" width="470"> 
     <figcaption>A black plane at different positions on a blue dotted path without
    rotation transforms.</figcaption>
    </figure>
    <p>If the <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate⑦">offset-rotate</a> property is set to <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto⑨">auto</a>, and the shape’s <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point①⓪">anchor point</a> is placed at different positions along the path, the shape is rotated based on the gradient at the current position and faces the direction of the path at this position.</p>
    <figure>
      <img alt="Path with auto rotation" height="120" src="images/offset-rotate-auto.svg" width="470"> 
     <figcaption>A black plane at different positions on a blue dotted path,
    rotated in the direction of the path.</figcaption>
    </figure>
    <p>In this example, the <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate⑧">offset-rotate</a> property is set to <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-reverse" id="ref-for-valdef-offset-rotate-reverse②">reverse</a>. The plane faces the opposite direction of the path at each position on the path.</p>
    <figure>
      <img alt="Path with reverse auto rotation" height="120" src="images/offset-rotate-reverse.svg" width="470"> 
     <figcaption>A black plane at different positions on a blue dotted path,
    rotated in the opposite direction of the path.</figcaption>
    </figure>
    <p>The last example sets the <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate⑨">offset-rotate</a> property to <span class="css">-45deg</span>. The shape is rotated anticlockwise by 45 degree once and keeps the rotation at each position on the path.</p>
    <figure>
      <img alt="Path with fixed rotation" height="120" src="images/offset-rotate-45.svg" width="470"> 
     <figcaption>A black plane at different positions on a blue dotted path,
    rotated by a fixed amount of degree.</figcaption>
    </figure>
   </div>
   <div class="example" id="example-552ec5f4">
    <a class="self-link" href="#example-552ec5f4"></a> This example shows how <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto①⓪">auto</a> or <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-reverse" id="ref-for-valdef-offset-rotate-reverse③">reverse</a> work when specified in combination
with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①⑥" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.
The computed value of <span class="production" id="ref-for-angle-value①⑦" title="Expands to: turn | rad | grad | deg">&lt;angle></span> is added to the computed value of <span class="css" id="ref-for-valdef-offset-rotate-auto①①">auto</span> or <span class="css" id="ref-for-valdef-offset-rotate-reverse④">reverse</span>. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- f>body</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>300</c-><c- b>px</c-><c- p>;</c->
        <c- k>margin</c-><c- p>:</c-> <c- mi>0</c-><c- b>px</c-><c- p>;</c->
        <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- kc>gray</c-><c- p>;</c->
        <c- k>border-radius</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>circle</c-> <c- p>{</c->
        <c- n>offset-position</c-><c- p>:</c-> <c- mi>150</c-><c- b>px</c-> <c- mi>150</c-><c- b>px</c-><c- p>;</c->
        <c- n>offset-distance</c-><c- p>:</c-> <c- mi>86</c-><c- b>%</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>42</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>42</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-color</c-><c- p>:</c-> <c- kc>mediumpurple</c-><c- p>;</c->
        <c- k>border-radius</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- k>display</c-><c- p>:</c-> <c- kc>flex</c-><c- p>;</c->
        <c- k>align-items</c-><c- p>:</c-> <c- kc>center</c-><c- p>;</c->
        <c- k>justify-content</c-><c- p>:</c-> <c- kc>center</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item1</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>0</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- kc>auto</c-> <c- mi>90</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item2</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>45</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- kc>auto</c-> <c- mi>90</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item3</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>135</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- kc>auto</c-> <c- mi>-90</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item4</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>180</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- kc>auto</c-> <c- mi>-90</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item5</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>225</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- kc>reverse</c-> <c- mi>90</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
    <c- p>#</c-><c- nn>item6</c-> <c- p>{</c->
        <c- n>offset-path</c-><c- p>:</c-> <c- nf>ray</c-><c- p>(</c-><c- mi>-45</c-><c- b>deg</c-> <c- n>closest</c-><c- o>-</c-><c- n>side</c-><c- p>);</c->
        <c- n>offset-rotate</c-><c- p>:</c-> <c- kc>reverse</c-> <c- mi>-90</c-><c- b>deg</c-><c- p>;</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circle"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item1"</c-><c- p>></c->1<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circle"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item2"</c-><c- p>></c->2<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circle"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item3"</c-><c- p>></c->3<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circle"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item4"</c-><c- p>></c->4<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circle"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item5"</c-><c- p>></c->5<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"circle"</c-> <c- e>id</c-><c- o>=</c-><c- s>"item6"</c-><c- p>></c->6<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
</code></pre>
    <figure>
      <img alt="An image of example for offset-rotate" src="images/rotate_by_angle_with_auto.png" style="width: 250px; text-align: center"> 
     <figcaption>The boxes are rotated by the value of <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto①②">auto</a> with a fixed amount of degree.</figcaption>
    </figure>
   </div>
   <h4 class="heading settled" data-level="4.5.1" id="calculating-path-transform"><span class="secno">4.5.1. </span><span class="content">Calculating the path transform</span><a class="self-link" href="#calculating-path-transform"></a></h4>
   <div class="switch">
    <ol>
     <li data-md>
      <p>Create a supplemental transformation matrix <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="t1">T1</dfn> for the local coordinate system of the box.</p>
     <li data-md>
      <p>Find the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①⑥">initial position</a> of the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path③①">offset path</a> specified by <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position①⑨">offset-position</a> as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="t2">T2</dfn>.</p>
     <li data-md>
      <p>Let <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="p">P</dfn> be the point at the <a data-link-type="dfn" href="#used-offset-distance" id="ref-for-used-offset-distance⑥">used offset distance</a> along the <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path③②">offset path</a>.</p>
     <li data-md>
      <p>Find the translation of the box such that its <a data-link-type="dfn" href="#anchor-point" id="ref-for-anchor-point①①">anchor point</a> is placed at <a data-link-type="dfn" href="#p" id="ref-for-p">P</a>, and apply that to <a data-link-type="dfn" href="#t2" id="ref-for-t2">T2</a>.</p>
     <li data-md>
      <p>Post-multiply <a data-link-type="dfn" href="#t2" id="ref-for-t2①">T2</a> by the rotation specified by <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①⓪">offset-rotate</a>.</p>
     <li data-md>
      <p>Post-multiply <a data-link-type="dfn" href="#t2" id="ref-for-t2②">T2</a> to <a data-link-type="dfn" href="#t1" id="ref-for-t1">T1</a>.</p>
     <li data-md>
      <p>Post-multiply <a data-link-type="dfn" href="#t1" id="ref-for-t1①">T1</a> to the local coordinate system of the box.</p>
    </ol>
   </div>
   <p class="issue" id="issue-8c7a4468"><a class="self-link" href="#issue-8c7a4468"></a> Do we need to say how to get the position in more detail?</p>
   <p class="issue" id="issue-af0945aa"><a class="self-link" href="#issue-af0945aa"></a> There needs to be a process for converting <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-rotate" id="ref-for-funcdef-transform-rotate">rotate()</a> to an angle.</p>
   <h3 class="heading settled" data-level="4.6" id="offset-shorthand"><span class="secno">4.6. </span><span class="content">Offset shorthand: The <a class="property" data-link-type="propdesc" href="#propdef-offset" id="ref-for-propdef-offset">offset</a> property</span><a class="self-link" href="#offset-shorthand"></a></h3>
   <table class="def propdef" data-link-for-hint="offset">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-offset">offset</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position②⓪">offset-position</a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> [ <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①④">offset-path</a> [ <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①②">offset-distance</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①①">offset-rotate</a> ]<span id="ref-for-mult-opt②">?</span> ]<span id="ref-for-mult-opt③">?</span> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-req" id="ref-for-mult-req">!</a> <br> [ / <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor④">offset-anchor</a> ]<span id="ref-for-mult-opt④">?</span>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-transforms-1/#transformable-element">transformable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>This is a shorthand property for setting <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position②①">offset-position</a>, <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①⑤">offset-path</a>, <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①③">offset-distance</a>, <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①②">offset-rotate</a> and <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor⑤">offset-anchor</a>. Omitted values are set to their initial values.</p>
   <h2 class="heading settled" data-level="5" id="priv-sec"><span class="secno">5. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>This specification introduces no new security or privacy considerations.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content">Changes</span><a class="self-link" href="#changes"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/">9 April 2015 First Public Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#motion-path-property">motion-path</a> to <a class="property" data-link-type="propdesc" href="#propdef-offset-path" id="ref-for-propdef-offset-path①⑥">offset-path</a> for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-angle-property">polar-angle</a>.</p>
     <ul>
      <li data-md>
       <p>Added the <a class="css" data-link-type="maybe" href="#valdef-offset-path-ray" id="ref-for-valdef-offset-path-ray②">ray()</a> to define an <a data-link-type="dfn" href="#offset-path" id="ref-for-offset-path③③">offset path</a> as a line segment which direction is specified by <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①⑧" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.</p>
      <li data-md>
       <p>Added <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-size" id="ref-for-typedef-size②" title="Expands to: farthest-side | closest-corner | <length-percentage>{2} | <length> | closest-side | farthest-corner | sides">&lt;size></a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-1/#propdef-contain" id="ref-for-propdef-contain③">contain</a> value for the <a class="css" data-link-type="maybe" href="#valdef-offset-path-ray" id="ref-for-valdef-offset-path-ray③">ray()</a>.</p>
     </ul>
    <li data-md>
     <p>Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-offset">motion-offset</a> to <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①④">offset-distance</a> for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-distance-property">polar-distance</a>.</p>
    <li data-md>
     <p>Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-rotation">motion-rotation</a> to <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①③">offset-rotate</a>.</p>
    <li data-md>
     <p>Added <a class="property" data-link-type="propdesc" href="#propdef-offset-position" id="ref-for-propdef-offset-position②②">offset-position</a> to specify the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/motion-1/#valdef-offsetpath-initial-position" id="ref-for-valdef-offsetpath-initial-position①⑦">initial position</a> of the path by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-origin-property">polar-origin</a> from <a data-link-type="biblio" href="#biblio-css-round-display-1">[CSS-ROUND-DISPLAY-1]</a>.</p>
    <li data-md>
     <p>Added <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor⑥">offset-anchor</a> to specify the origin point of the element by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-anchor-property">polar-anchor</a> from <a data-link-type="biblio" href="#biblio-css-round-display-1">[CSS-ROUND-DISPLAY-1]</a>.</p>
    <li data-md>
     <p>Renamed the shorthand property <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion">motion</a> to <a class="property" data-link-type="propdesc" href="#propdef-offset" id="ref-for-propdef-offset①">offset</a>.</p>
    <li data-md>
     <p>Made <a class="property" data-link-type="propdesc" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①④">offset-rotate</a> specify the rotation transformation by <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-auto" id="ref-for-valdef-offset-rotate-auto①③">auto</a> or <a class="css" data-link-type="maybe" href="#valdef-offset-rotate-reverse" id="ref-for-valdef-offset-rotate-reverse⑤">reverse</a> in combination with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①⑨" title="Expands to: turn | rad | grad | deg">&lt;angle></a>.</p>
   </ul>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Thanks to
fantasai,
Hyojin Song,
and
all the rest of the CSS WG members
for their reviews, comments, and corrections.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#anchor-point">anchor point</a><span>, in §4.4</span>
   <li><a href="#valdef-offset-rotate-auto">auto</a><span>, in §4.5</span>
   <li><a href="#size-closest-corner">closest-corner</a><span>, in §4.1</span>
   <li><a href="#size-closest-side">closest-side</a><span>, in §4.1</span>
   <li><a href="#valdef-offset-path-contain">contain</a><span>, in §4.1</span>
   <li><a href="#size-farthest-corner">farthest-corner</a><span>, in §4.1</span>
   <li><a href="#size-farthest-side">farthest-side</a><span>, in §4.1</span>
   <li><a href="#offset-path-initial-direction">initial direction</a><span>, in §4.1</span>
   <li><a href="#offset-path-initial-position">initial position</a><span>, in §4.1</span>
   <li><a href="#offsetpath-none">none</a><span>, in §4.1</span>
   <li><a href="#propdef-offset">offset</a><span>, in §4.6</span>
   <li><a href="#propdef-offset-anchor">offset-anchor</a><span>, in §4.4</span>
   <li><a href="#propdef-offset-distance">offset-distance</a><span>, in §4.2</span>
   <li><a href="#offset-distance">offset distance</a><span>, in §4.2.1</span>
   <li><a href="#propdef-offset-path">offset-path</a><span>, in §4.1</span>
   <li><a href="#offset-path">offset path</a><span>, in §4.1</span>
   <li><a href="#propdef-offset-position">offset-position</a><span>, in §4.3</span>
   <li><a href="#propdef-offset-rotate">offset-rotate</a><span>, in §4.5</span>
   <li><a href="#p">P</a><span>, in §4.5.1</span>
   <li><a href="#offsetpath-pathfunc">path()</a><span>, in §4.1</span>
   <li><a href="#valdef-offset-path-ray">ray()</a><span>, in §4.1</span>
   <li><a href="#valdef-offset-rotate-reverse">reverse</a><span>, in §4.5</span>
   <li><a href="#size-sides">sides</a><span>, in §4.1</span>
   <li><a href="#valdef-offsetpath-size">&lt;size></a><span>, in §4.1</span>
   <li><a href="#t1">T1</a><span>, in §4.5.1</span>
   <li><a href="#t2">T2</a><span>, in §4.5.1</span>
   <li><a href="#total-length">total length</a><span>, in §4.2.1</span>
   <li><a href="#used-offset-distance">used offset distance</a><span>, in §4.2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position">4.4. Define an anchor point: The offset-anchor property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-radius">4.1. Define a path: The offset-path property</a> <a href="#ref-for-propdef-border-radius①">(2)</a>
    <li><a href="#ref-for-propdef-border-radius②">4.1.3. Examples of &lt;coord-box> Positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">4.1. Define a path: The offset-path property</a> <a href="#ref-for-used-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-contain">
   <a href="https://drafts.csswg.org/css-contain-1/#propdef-contain">https://drafts.csswg.org/css-contain-1/#propdef-contain</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-contain">4.1.1. Examples Of ray() Positioning</a> <a href="#ref-for-propdef-contain①">(2)</a> <a href="#ref-for-propdef-contain②">(3)</a>
    <li><a href="#ref-for-propdef-contain③">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-geometry-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#typedef-geometry-box">https://drafts.fxtf.org/css-masking-1/#typedef-geometry-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-geometry-box">4.3. Define the starting point of the path: The offset-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-mask-clip-border-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-border-box">https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-border-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-border-box">4.1. Define a path: The offset-path property</a> <a href="#ref-for-valdef-mask-clip-border-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-mask-clip-content-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-content-box">https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-content-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-content-box">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-clip-path-fill-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-fill-box">https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-fill-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-path-fill-box">4.1. Define a path: The offset-path property</a> <a href="#ref-for-valdef-clip-path-fill-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuedef-margin-box0">
   <a href="https://www.w3.org/TR/css-masking-1/#valuedef-margin-box0">https://www.w3.org/TR/css-masking-1/#valuedef-margin-box0</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuedef-margin-box0">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-mask-clip-padding-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-padding-box">https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-padding-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-padding-box">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-clip-path-stroke-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-stroke-box">https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-stroke-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-path-stroke-box">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-clip-path-view-box">
   <a href="https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-view-box">https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-view-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-path-view-box">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-left">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-left">https://drafts.csswg.org/css-position-3/#propdef-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-left">4.3. Define the starting point of the path: The offset-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-position">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-position">https://drafts.csswg.org/css-position-3/#propdef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-position">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-propdef-position①">(2)</a> <a href="#ref-for-propdef-position②">(3)</a> <a href="#ref-for-propdef-position③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stacking-context">
   <a href="https://drafts.csswg.org/css-position-3/#stacking-context">https://drafts.csswg.org/css-position-3/#stacking-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stacking-context">2. Module interactions</a>
    <li><a href="#ref-for-stacking-context①">4.1. Define a path: The offset-path property</a>
    <li><a href="#ref-for-stacking-context②">4.3. Define the starting point of the path: The offset-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-static">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-static">https://drafts.csswg.org/css-position-3/#valdef-position-static</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-static">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-valdef-position-static①">(2)</a> <a href="#ref-for-valdef-position-static②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-top">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-top">https://drafts.csswg.org/css-position-3/#propdef-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-top">4.3. Define the starting point of the path: The offset-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-shape-box-border-box">
   <a href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box">https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-shape-box-border-box">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-circle">
   <a href="https://drafts.csswg.org/css-shapes-1/#funcdef-circle">https://drafts.csswg.org/css-shapes-1/#funcdef-circle</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-circle">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-ellipse">
   <a href="https://drafts.csswg.org/css-shapes-1/#funcdef-ellipse">https://drafts.csswg.org/css-shapes-1/#funcdef-ellipse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-ellipse">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-inset">
   <a href="https://drafts.csswg.org/css-shapes-1/#funcdef-inset">https://drafts.csswg.org/css-shapes-1/#funcdef-inset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-inset">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-polygon">
   <a href="https://drafts.csswg.org/css-shapes-1/#funcdef-polygon">https://drafts.csswg.org/css-shapes-1/#funcdef-polygon</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-polygon">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-basic-shape">
   <a href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape">https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-basic-shape">4.1. Define a path: The offset-path property</a> <a href="#ref-for-typedef-basic-shape①">(2)</a> <a href="#ref-for-typedef-basic-shape②">(3)</a> <a href="#ref-for-typedef-basic-shape③">(4)</a>
    <li><a href="#ref-for-typedef-basic-shape④">4.1.2. Examples Of &lt;basic-shape> Positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-local-coordinate-system">
   <a href="https://drafts.csswg.org/css-transforms-1/#local-coordinate-system">https://drafts.csswg.org/css-transforms-1/#local-coordinate-system</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-local-coordinate-system">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-transform-rotate">
   <a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-rotate">https://drafts.csswg.org/css-transforms-1/#funcdef-transform-rotate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-transform-rotate">4.5.1. Calculating the path transform</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">https://drafts.csswg.org/css-transforms-1/#propdef-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform">2. Module interactions</a>
    <li><a href="#termref-for-">4.1. Define a path: The offset-path property</a>
    <li><a href="#termref-for-">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-propdef-transform①">(2)</a>
    <li><a href="#ref-for-propdef-transform②">4.5. Rotation at point: The offset-rotate property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform-origin">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin">https://drafts.csswg.org/css-transforms-1/#propdef-transform-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform-origin">4.4. Define an anchor point: The offset-anchor property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-rotate">
   <a href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">https://drafts.csswg.org/css-transforms-2/#propdef-rotate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-rotate">2. Module interactions</a>
    <li><a href="#ref-for-propdef-rotate①">4.3. Define the starting point of the path: The offset-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-scale">
   <a href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">https://drafts.csswg.org/css-transforms-2/#propdef-scale</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-scale">2. Module interactions</a>
    <li><a href="#ref-for-propdef-scale①">4.3. Define the starting point of the path: The offset-position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-translate">
   <a href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">https://drafts.csswg.org/css-transforms-2/#propdef-translate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-translate">2. Module interactions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-req">
   <a href="https://drafts.csswg.org/css-values-4/#mult-req">https://drafts.csswg.org/css-values-4/#mult-req</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-req">4.6. Offset shorthand: The offset property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-all">
   <a href="https://drafts.csswg.org/css-values-4/#comb-all">https://drafts.csswg.org/css-values-4/#comb-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">4.2. Position on the path: The offset-distance property</a> <a href="#ref-for-typedef-length-percentage①">(2)</a> <a href="#ref-for-typedef-length-percentage②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-position">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-position">https://drafts.csswg.org/css-values-4/#typedef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-position">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-typedef-position①">(2)</a>
    <li><a href="#ref-for-typedef-position②">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-typedef-position③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">4.1. Define a path: The offset-path property</a>
    <li><a href="#ref-for-mult-opt①">4.6. Offset shorthand: The offset property</a> <a href="#ref-for-mult-opt②">(2)</a> <a href="#ref-for-mult-opt③">(3)</a> <a href="#ref-for-mult-opt④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">4.1. Define a path: The offset-path property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a>
    <li><a href="#ref-for-comb-one⑤">4.3. Define the starting point of the path: The offset-position property</a>
    <li><a href="#ref-for-comb-one⑥">4.4. Define an anchor point: The offset-anchor property</a>
    <li><a href="#ref-for-comb-one⑦">4.5. Rotation at point: The offset-rotate property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">4.5. Rotation at point: The offset-rotate property</a>
    <li><a href="#ref-for-comb-any①">4.6. Offset shorthand: The offset property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-size">
   <a href="https://drafts.csswg.org/css-images-3/#typedef-size">https://drafts.csswg.org/css-images-3/#typedef-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-size">4.1. Define a path: The offset-path property</a> <a href="#ref-for-typedef-size①">(2)</a>
    <li><a href="#ref-for-typedef-size②">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angle-value">
   <a href="https://drafts.csswg.org/css-values-3/#angle-value">https://drafts.csswg.org/css-values-3/#angle-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">4.1. Define a path: The offset-path property</a> <a href="#ref-for-angle-value①">(2)</a> <a href="#ref-for-angle-value②">(3)</a> <a href="#ref-for-angle-value③">(4)</a> <a href="#ref-for-angle-value④">(5)</a>
    <li><a href="#ref-for-angle-value⑤">4.2.1. Calculating the computed distance along a path</a> <a href="#ref-for-angle-value⑥">(2)</a> <a href="#ref-for-angle-value⑦">(3)</a>
    <li><a href="#ref-for-angle-value⑧">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-angle-value⑨">(2)</a> <a href="#ref-for-angle-value①⓪">(3)</a> <a href="#ref-for-angle-value①①">(4)</a> <a href="#ref-for-angle-value①②">(5)</a> <a href="#ref-for-angle-value①③">(6)</a> <a href="#ref-for-angle-value①④">(7)</a> <a href="#ref-for-angle-value①⑤">(8)</a> <a href="#ref-for-angle-value①⑥">(9)</a> <a href="#ref-for-angle-value①⑦">(10)</a>
    <li><a href="#ref-for-angle-value①⑧">Changes</a> <a href="#ref-for-angle-value①⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">4.3. Define the starting point of the path: The offset-position property</a>
    <li><a href="#ref-for-length-value①">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-length-value②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">4.4. Define an anchor point: The offset-anchor property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-value">
   <a href="https://drafts.csswg.org/css-values-3/#string-value">https://drafts.csswg.org/css-values-3/#string-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">4.1. Define a path: The offset-path property</a> <a href="#ref-for-string-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://drafts.csswg.org/css-values-3/#url-value">https://drafts.csswg.org/css-values-3/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">4.1. Define a path: The offset-path property</a> <a href="#ref-for-url-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermPathDirection">
   <a href="https://svgwg.org/svg2-draft/paths.html#TermPathDirection">https://svgwg.org/svg2-draft/paths.html#TermPathDirection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermPathDirection">4.5. Rotation at point: The offset-rotate property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermShapeElement">
   <a href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement">https://svgwg.org/svg2-draft/shapes.html#TermShapeElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermShapeElement">4.1. Define a path: The offset-path property</a> <a href="#ref-for-TermShapeElement①">(2)</a> <a href="#ref-for-TermShapeElement②">(3)</a> <a href="#ref-for-TermShapeElement③">(4)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position" style="color:initial">background-position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-radius" style="color:initial">border-radius</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-contain-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-contain" style="color:initial">contain</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-masking-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-geometry-box" style="color:initial">&lt;geometry-box></span>
     <li><span class="dfn-paneled" id="term-for-valdef-mask-clip-border-box" style="color:initial">border-box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-mask-clip-content-box" style="color:initial">content-box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-clip-path-fill-box" style="color:initial">fill-box</span>
     <li><span class="dfn-paneled" id="term-for-valuedef-margin-box0" style="color:initial">margin-box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-mask-clip-padding-box" style="color:initial">padding-box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-clip-path-stroke-box" style="color:initial">stroke-box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-clip-path-view-box" style="color:initial">view-box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-left" style="color:initial">left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-position" style="color:initial">position</span>
     <li><span class="dfn-paneled" id="term-for-stacking-context" style="color:initial">stacking context</span>
     <li><span class="dfn-paneled" id="term-for-valdef-position-static" style="color:initial">static</span>
     <li><span class="dfn-paneled" id="term-for-propdef-top" style="color:initial">top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-SHAPES]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-shape-box-border-box" style="color:initial">border-box</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-circle" style="color:initial">circle()</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-ellipse" style="color:initial">ellipse()</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-inset" style="color:initial">inset()</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-polygon" style="color:initial">polygon()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-shapes-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-basic-shape" style="color:initial">&lt;basic-shape></span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-local-coordinate-system" style="color:initial">local coordinate system</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-transform-rotate" style="color:initial">rotate()</span>
     <li><span class="dfn-paneled" id="term-for-propdef-transform" style="color:initial">transform</span>
     <li><span class="dfn-paneled" id="term-for-propdef-transform-origin" style="color:initial">transform-origin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-rotate" style="color:initial">rotate</span>
     <li><span class="dfn-paneled" id="term-for-propdef-scale" style="color:initial">scale</span>
     <li><span class="dfn-paneled" id="term-for-propdef-translate" style="color:initial">translate</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-req" style="color:initial">!</span>
     <li><span class="dfn-paneled" id="term-for-comb-all" style="color:initial">&amp;&amp;</span>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-typedef-position" style="color:initial">&lt;position></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-size" style="color:initial">&lt;size></span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3VAL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angle-value" style="color:initial">&lt;angle></span>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
     <li><span class="dfn-paneled" id="term-for-string-value" style="color:initial">&lt;string></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-TermPathDirection" style="color:initial">direction of a path</span>
     <li><span class="dfn-paneled" id="term-for-TermShapeElement" style="color:initial">shape elements</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-contain-1">[CSS-CONTAIN-1]
   <dd>Tab Atkins Jr.; Florian Rivoal. <a href="https://www.w3.org/TR/css-contain-1/">CSS Containment Module Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-contain-1/">https://www.w3.org/TR/css-contain-1/</a>
   <dt id="biblio-css-masking-1">[CSS-MASKING-1]
   <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-masking-1/">CSS Masking Module Level 1</a>. 26 August 2014. CR. URL: <a href="https://www.w3.org/TR/css-masking-1/">https://www.w3.org/TR/css-masking-1/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-shapes">[CSS-SHAPES]
   <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href="https://www.w3.org/TR/css-shapes-1/">CSS Shapes Module Level 1</a>. 20 March 2014. CR. URL: <a href="https://www.w3.org/TR/css-shapes-1/">https://www.w3.org/TR/css-shapes-1/</a>
   <dt id="biblio-css-shapes-2">[CSS-SHAPES-2]
   <dd>CSS Shapes Module Level 2 URL: <a href="https://drafts.csswg.org/css-shapes-2/">https://drafts.csswg.org/css-shapes-2/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css-transforms-2">[CSS-TRANSFORMS-2]
   <dd>CSS Transforms Module Level 2 URL: <a href="https://drafts.csswg.org/css-transforms-2/">https://drafts.csswg.org/css-transforms-2/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-css3val">[CSS3VAL]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-round-display-1">[CSS-ROUND-DISPLAY-1]
   <dd>Jihye Hong. <a href="https://www.w3.org/TR/css-round-display-1/">CSS Round Display Level 1</a>. 22 December 2016. WD. URL: <a href="https://www.w3.org/TR/css-round-display-1/">https://www.w3.org/TR/css-round-display-1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-offset" id="ref-for-propdef-offset②">offset</a>
      <td>[ offset-position? [ offset-path [ offset-distance || offset-rotate ]? ]? ]!  [ / offset-anchor ]?
      <td>see individual properties
      <td>transformable elements
      <td>no
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor⑦">offset-anchor</a>
      <td>auto | &lt;position>
      <td>auto
      <td>transformable elements
      <td>no
      <td>Relative to the width and the height of a box
      <td>by computed value
      <td>per grammar
      <td>For &lt;length> the absolute value, otherwise a percentage.
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance①⑤">offset-distance</a>
      <td>&lt;length-percentage>
      <td>0
      <td>transformable elements
      <td>no
      <td>refer to the total path length
      <td>by computed value
      <td>per grammar
      <td>a computed &lt;length-percentage> value
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-offset-path" id="ref-for-propdef-offset-path①⑦">offset-path</a>
      <td>none | ray() | path() | &lt;url> | [ &lt;basic-shape> &amp;&amp; &lt;coord-box>? ] | &lt;coord-box>
      <td>none
      <td>transformable elements
      <td>no
      <td>n/a
      <td>by computed value
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-offset-position" id="ref-for-propdef-offset-position②③">offset-position</a>
      <td>auto | &lt;position>
      <td>auto
      <td>transformable elements
      <td>no
      <td>Refer to the size of containing block
      <td>by computed value
      <td>per grammar
      <td>For &lt;length> the absolute value, otherwise a percentage.
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-offset-rotate" id="ref-for-propdef-offset-rotate①⑤">offset-rotate</a>
      <td>[ auto | reverse ] || &lt;angle>
      <td>auto
      <td>transformable elements
      <td>no
      <td>n/a
      <td>by computed value
      <td>per grammar
      <td>computed &lt;angle> value, optionally preceded by auto
      <td>visual
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Do we need to say how to get the position in more detail?<a href="#issue-8c7a4468"> ↵ </a></div>
   <div class="issue"> There needs to be a process for converting <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-rotate">rotate()</a> to an angle.<a href="#issue-af0945aa"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="propdef-offset-path">
   <b><a href="#propdef-offset-path">#propdef-offset-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset-path">2. Module interactions</a>
    <li><a href="#ref-for-propdef-offset-path①">4. Motion Paths</a>
    <li><a href="#ref-for-propdef-offset-path②">4.1. Define a path: The offset-path property</a> <a href="#ref-for-propdef-offset-path③">(2)</a>
    <li><a href="#ref-for-propdef-offset-path④">4.1.1. Examples Of ray() Positioning</a> <a href="#ref-for-propdef-offset-path⑤">(2)</a> <a href="#ref-for-propdef-offset-path⑥">(3)</a> <a href="#ref-for-propdef-offset-path⑦">(4)</a>
    <li><a href="#ref-for-propdef-offset-path⑧">4.2.1. Calculating the computed distance along a path</a>
    <li><a href="#ref-for-propdef-offset-path⑨">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-propdef-offset-path①⓪">(2)</a> <a href="#ref-for-propdef-offset-path①①">(3)</a>
    <li><a href="#ref-for-propdef-offset-path①②">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-propdef-offset-path①③">(2)</a>
    <li><a href="#ref-for-propdef-offset-path①④">4.6. Offset shorthand: The offset property</a> <a href="#ref-for-propdef-offset-path①⑤">(2)</a>
    <li><a href="#ref-for-propdef-offset-path①⑥">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="offset-path">
   <b><a href="#offset-path">#offset-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-offset-path">4.1. Define a path: The offset-path property</a> <a href="#ref-for-offset-path①">(2)</a> <a href="#ref-for-offset-path②">(3)</a> <a href="#ref-for-offset-path③">(4)</a> <a href="#ref-for-offset-path④">(5)</a> <a href="#ref-for-offset-path⑤">(6)</a>
    <li><a href="#ref-for-offset-path⑥">4.1.1. Examples Of ray() Positioning</a>
    <li><a href="#ref-for-offset-path⑦">4.1.3. Examples of &lt;coord-box> Positioning</a>
    <li><a href="#ref-for-offset-path⑧">4.2. Position on the path: The offset-distance property</a> <a href="#ref-for-offset-path⑨">(2)</a> <a href="#ref-for-offset-path①⓪">(3)</a> <a href="#ref-for-offset-path①①">(4)</a>
    <li><a href="#ref-for-offset-path①②">4.2.1. Calculating the computed distance along a path</a> <a href="#ref-for-offset-path①③">(2)</a> <a href="#ref-for-offset-path①④">(3)</a> <a href="#ref-for-offset-path①⑤">(4)</a> <a href="#ref-for-offset-path①⑥">(5)</a> <a href="#ref-for-offset-path①⑦">(6)</a> <a href="#ref-for-offset-path①⑧">(7)</a> <a href="#ref-for-offset-path①⑨">(8)</a> <a href="#ref-for-offset-path②⓪">(9)</a> <a href="#ref-for-offset-path②①">(10)</a> <a href="#ref-for-offset-path②②">(11)</a>
    <li><a href="#ref-for-offset-path②③">4.3. Define the starting point of the path: The offset-position property</a>
    <li><a href="#ref-for-offset-path②④">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-offset-path②⑤">(2)</a>
    <li><a href="#ref-for-offset-path②⑥">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-offset-path②⑦">(2)</a> <a href="#ref-for-offset-path②⑧">(3)</a> <a href="#ref-for-offset-path②⑨">(4)</a> <a href="#ref-for-offset-path③⓪">(5)</a>
    <li><a href="#ref-for-offset-path③①">4.5.1. Calculating the path transform</a> <a href="#ref-for-offset-path③②">(2)</a>
    <li><a href="#ref-for-offset-path③③">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="offset-path-initial-position">
   <b><a href="#offset-path-initial-position">#offset-path-initial-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-offset-path-initial-position">4.1. Define a path: The offset-path property</a>
    <li><a href="#ref-for-offset-path-initial-position①">4.1.3. Examples of &lt;coord-box> Positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-offset-path-ray">
   <b><a href="#valdef-offset-path-ray">#valdef-offset-path-ray</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-offset-path-ray">4.1. Define a path: The offset-path property</a>
    <li><a href="#ref-for-valdef-offset-path-ray①">4.1.1. Examples Of ray() Positioning</a>
    <li><a href="#ref-for-valdef-offset-path-ray②">Changes</a> <a href="#ref-for-valdef-offset-path-ray③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="size-closest-side">
   <b><a href="#size-closest-side">#size-closest-side</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-size-closest-side">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="size-farthest-side">
   <b><a href="#size-farthest-side">#size-farthest-side</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-size-farthest-side">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="size-sides">
   <b><a href="#size-sides">#size-sides</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-size-sides">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="offsetpath-pathfunc">
   <b><a href="#offsetpath-pathfunc">#offsetpath-pathfunc</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-offsetpath-pathfunc">4.1. Define a path: The offset-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="offsetpath-none">
   <b><a href="#offsetpath-none">#offsetpath-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-offsetpath-none">4.1. Define a path: The offset-path property</a> <a href="#ref-for-offsetpath-none">(2)</a>
    <li><a href="#ref-for-offsetpath-none">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-offsetpath-none">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-offset-distance">
   <b><a href="#propdef-offset-distance">#propdef-offset-distance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset-distance">4. Motion Paths</a>
    <li><a href="#ref-for-propdef-offset-distance①">4.1. Define a path: The offset-path property</a> <a href="#ref-for-propdef-offset-distance②">(2)</a> <a href="#ref-for-propdef-offset-distance③">(3)</a> <a href="#ref-for-propdef-offset-distance④">(4)</a> <a href="#ref-for-propdef-offset-distance⑤">(5)</a> <a href="#ref-for-propdef-offset-distance⑥">(6)</a> <a href="#ref-for-propdef-offset-distance⑦">(7)</a>
    <li><a href="#ref-for-propdef-offset-distance⑧">4.2. Position on the path: The offset-distance property</a>
    <li><a href="#ref-for-propdef-offset-distance⑨">4.2.1. Calculating the computed distance along a path</a>
    <li><a href="#ref-for-propdef-offset-distance①⓪">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-propdef-offset-distance①①">(2)</a>
    <li><a href="#ref-for-propdef-offset-distance①②">4.6. Offset shorthand: The offset property</a> <a href="#ref-for-propdef-offset-distance①③">(2)</a>
    <li><a href="#ref-for-propdef-offset-distance①④">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="used-offset-distance">
   <b><a href="#used-offset-distance">#used-offset-distance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-offset-distance">4.1.1. Examples Of ray() Positioning</a>
    <li><a href="#ref-for-used-offset-distance①">4.2.1. Calculating the computed distance along a path</a> <a href="#ref-for-used-offset-distance②">(2)</a> <a href="#ref-for-used-offset-distance③">(3)</a> <a href="#ref-for-used-offset-distance④">(4)</a> <a href="#ref-for-used-offset-distance⑤">(5)</a>
    <li><a href="#ref-for-used-offset-distance⑥">4.5.1. Calculating the path transform</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="offset-distance">
   <b><a href="#offset-distance">#offset-distance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-offset-distance">4.2.1. Calculating the computed distance along a path</a> <a href="#ref-for-offset-distance①">(2)</a> <a href="#ref-for-offset-distance②">(3)</a> <a href="#ref-for-offset-distance③">(4)</a> <a href="#ref-for-offset-distance④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="total-length">
   <b><a href="#total-length">#total-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-total-length">4.2.1. Calculating the computed distance along a path</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-offset-position">
   <b><a href="#propdef-offset-position">#propdef-offset-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset-position">2. Module interactions</a>
    <li><a href="#ref-for-propdef-offset-position①">4. Motion Paths</a>
    <li><a href="#ref-for-propdef-offset-position②">4.1. Define a path: The offset-path property</a> <a href="#ref-for-propdef-offset-position③">(2)</a>
    <li><a href="#ref-for-propdef-offset-position④">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-propdef-offset-position⑤">(2)</a> <a href="#ref-for-propdef-offset-position⑥">(3)</a> <a href="#ref-for-propdef-offset-position⑦">(4)</a> <a href="#ref-for-propdef-offset-position⑧">(5)</a> <a href="#ref-for-propdef-offset-position⑨">(6)</a> <a href="#ref-for-propdef-offset-position①⓪">(7)</a> <a href="#ref-for-propdef-offset-position①①">(8)</a> <a href="#ref-for-propdef-offset-position①②">(9)</a> <a href="#ref-for-propdef-offset-position①③">(10)</a> <a href="#ref-for-propdef-offset-position①④">(11)</a> <a href="#ref-for-propdef-offset-position①⑤">(12)</a>
    <li><a href="#ref-for-propdef-offset-position①⑥">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-propdef-offset-position①⑦">(2)</a> <a href="#ref-for-propdef-offset-position①⑧">(3)</a>
    <li><a href="#ref-for-propdef-offset-position①⑨">4.5.1. Calculating the path transform</a>
    <li><a href="#ref-for-propdef-offset-position②⓪">4.6. Offset shorthand: The offset property</a> <a href="#ref-for-propdef-offset-position②①">(2)</a>
    <li><a href="#ref-for-propdef-offset-position②②">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-offset-anchor">
   <b><a href="#propdef-offset-anchor">#propdef-offset-anchor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset-anchor">4. Motion Paths</a>
    <li><a href="#ref-for-propdef-offset-anchor①">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-propdef-offset-anchor②">(2)</a> <a href="#ref-for-propdef-offset-anchor③">(3)</a>
    <li><a href="#ref-for-propdef-offset-anchor④">4.6. Offset shorthand: The offset property</a> <a href="#ref-for-propdef-offset-anchor⑤">(2)</a>
    <li><a href="#ref-for-propdef-offset-anchor⑥">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="anchor-point">
   <b><a href="#anchor-point">#anchor-point</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-anchor-point">4. Motion Paths</a>
    <li><a href="#ref-for-anchor-point①">4.2. Position on the path: The offset-distance property</a>
    <li><a href="#ref-for-anchor-point②">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-anchor-point③">(2)</a> <a href="#ref-for-anchor-point④">(3)</a> <a href="#ref-for-anchor-point⑤">(4)</a> <a href="#ref-for-anchor-point⑥">(5)</a> <a href="#ref-for-anchor-point⑦">(6)</a>
    <li><a href="#ref-for-anchor-point⑧">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-anchor-point⑨">(2)</a> <a href="#ref-for-anchor-point①⓪">(3)</a>
    <li><a href="#ref-for-anchor-point①①">4.5.1. Calculating the path transform</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-offset-rotate">
   <b><a href="#propdef-offset-rotate">#propdef-offset-rotate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset-rotate">4. Motion Paths</a>
    <li><a href="#ref-for-propdef-offset-rotate①">4.1. Define a path: The offset-path property</a> <a href="#ref-for-propdef-offset-rotate②">(2)</a> <a href="#ref-for-propdef-offset-rotate③">(3)</a>
    <li><a href="#ref-for-propdef-offset-rotate④">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-propdef-offset-rotate⑤">(2)</a> <a href="#ref-for-propdef-offset-rotate⑥">(3)</a> <a href="#ref-for-propdef-offset-rotate⑦">(4)</a> <a href="#ref-for-propdef-offset-rotate⑧">(5)</a> <a href="#ref-for-propdef-offset-rotate⑨">(6)</a>
    <li><a href="#ref-for-propdef-offset-rotate①⓪">4.5.1. Calculating the path transform</a>
    <li><a href="#ref-for-propdef-offset-rotate①①">4.6. Offset shorthand: The offset property</a> <a href="#ref-for-propdef-offset-rotate①②">(2)</a>
    <li><a href="#ref-for-propdef-offset-rotate①③">Changes</a> <a href="#ref-for-propdef-offset-rotate①④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-offset-rotate-auto">
   <b><a href="#valdef-offset-rotate-auto">#valdef-offset-rotate-auto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-offset-rotate-auto">4.1. Define a path: The offset-path property</a>
    <li><a href="#ref-for-valdef-offset-rotate-auto①">4.3. Define the starting point of the path: The offset-position property</a> <a href="#ref-for-valdef-offset-rotate-auto②">(2)</a> <a href="#ref-for-valdef-offset-rotate-auto③">(3)</a>
    <li><a href="#ref-for-valdef-offset-rotate-auto④">4.4. Define an anchor point: The offset-anchor property</a> <a href="#ref-for-valdef-offset-rotate-auto⑤">(2)</a>
    <li><a href="#ref-for-valdef-offset-rotate-auto⑥">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-valdef-offset-rotate-auto⑦">(2)</a> <a href="#ref-for-valdef-offset-rotate-auto⑧">(3)</a> <a href="#ref-for-valdef-offset-rotate-auto⑨">(4)</a> <a href="#ref-for-valdef-offset-rotate-auto①⓪">(5)</a> <a href="#ref-for-valdef-offset-rotate-auto①①">(6)</a> <a href="#ref-for-valdef-offset-rotate-auto①②">(7)</a>
    <li><a href="#ref-for-valdef-offset-rotate-auto①③">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-offset-rotate-reverse">
   <b><a href="#valdef-offset-rotate-reverse">#valdef-offset-rotate-reverse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-offset-rotate-reverse">4.5. Rotation at point: The offset-rotate property</a> <a href="#ref-for-valdef-offset-rotate-reverse①">(2)</a> <a href="#ref-for-valdef-offset-rotate-reverse②">(3)</a> <a href="#ref-for-valdef-offset-rotate-reverse③">(4)</a> <a href="#ref-for-valdef-offset-rotate-reverse④">(5)</a>
    <li><a href="#ref-for-valdef-offset-rotate-reverse⑤">Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="t1">
   <b><a href="#t1">#t1</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-t1">4.5.1. Calculating the path transform</a> <a href="#ref-for-t1①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="t2">
   <b><a href="#t2">#t2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-t2">4.5.1. Calculating the path transform</a> <a href="#ref-for-t2①">(2)</a> <a href="#ref-for-t2②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="p">
   <b><a href="#p">#p</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-p">4.5.1. Calculating the path transform</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-offset">
   <b><a href="#propdef-offset">#propdef-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-offset">4.6. Offset shorthand: The offset property</a>
    <li><a href="#ref-for-propdef-offset①">Changes</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>